<!--
* @description 人物属性模拟器
* @fileName simulator.vue
* @author huangyu
* @date 2022/05/20 13:49:52
* @url aion.aspirine.su , https://aion.life/daqihonggongju , https://aiondb.ru/tools/equipment/
!-->
<template>
    <div>
        <div class="otor_wrap border">
            <el-form :inline="true" class="otor_form otor_form_search">
                <el-form-item label="武器强化">
                    <el-input v-model="WQStrong" style="width:80px"></el-input>
                </el-form-item>
                <el-form-item label="防具强化">
                    <el-input v-model="FJStrong" style="width:80px"></el-input>
                </el-form-item>
                <el-form-item label="选择职业">
                    <el-select v-model="ZYTypeStr" style="width:100px" @change="changeZYTypeStr">
                        <el-option
                        v-for="(item,index) in ZYTypeList"
                        :key="index"
                        :label="item"
                        :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="人物等级">
                    <el-radio-group v-model="Level">
                        <el-radio :label="50">50级</el-radio>
                        <el-radio :label="55">55级</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div>
        <el-row :gutter="20">
            <el-col :span="11">
                <!-- {{changeList}} -->
                <el-table :data="changeList" border highlight-current-row :row-class-name="tableRowClassName">
                    <el-table-column label="装备部位" prop="bwType" width="80"></el-table-column>
                    <el-table-column label="装备图标" prop="icon" width="80">
                        <template slot-scope="scope">
                            <div class="icon" @click="clickDetail(scope.row)" :style="{background:'url(/aion/images/game/icon/items/'+scope.row.icon+')',width:'40px',height:'40px',cursor:'pointer'}" v-if="scope.row.icon"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="装备名称" prop="name"></el-table-column>
                    <el-table-column label="装备魔石" prop="msNumber" width="140">
                        <template slot-scope="scope">
                            <div v-for="(item,index) in scope.row.msList" :key="index" class="color_success">{{item.name}} * {{item.number}}</div>
                            <i class="el-icon-setting" @click="changeMS(scope.row)" v-if="scope.row.name&&(scope.row.ZBType==1||scope.row.ZBType==2)" style="position:absolute;top:5px;right:5px;cursor: pointer;font-size:16px;"></i>
                        </template>
                    </el-table-column>
                    <el-table-column label="装备等级" prop="level" width="80"></el-table-column>
                    <el-table-column label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button size="mini" plain type="primary" @click="clickZB(scope.row)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <!-- <el-col :span="7">
                {{changeList}}
            </el-col> -->
            <el-col :span="8">
                <el-divider content-position="left">{{ZYTypeStr}} {{Level}}级 基础属性</el-divider>
                <el-row>
                    <el-col :span="12">
                        <div>生命力：{{occAttrModel.hp}}</div>
                        <div>精神力：{{occAttrModel.mp}}</div>
                        <div>物理攻击力(白)：{{occAttrModel.wlgj}}</div>
                        <div>物理攻击力(绿)：{{occAttrModel.wlgjlv}}</div>
                        <div>物理命中：{{occAttrModel.hit}}</div>
                    </el-col>
                    <el-col :span="12">
                        <div>魔法增幅力：{{occAttrModel.mfzfl}}</div>
                        <div>魔法命中：{{occAttrModel.mfmz}}</div>
                        <div>魔法致命：{{occAttrModel.mfzm}}</div>
                    </el-col>
                </el-row>
                <el-divider content-position="left">装备属性</el-divider>
                <el-row>
                    <el-col :span="12">
                        <div>生命力：{{sumCount(SXData.hpList)}}</div>
                        <div>物理攻击力(白)：{{sumCount(SXData.wlgjList)}}</div>
                        <div>物理攻击力(绿)：{{sumCount(SXData.wlgjlvList)}}</div>
                        <div>物理致命一击：{{sumCount(SXData.wlzmList)}}</div>
                        <div>物理命中：{{sumCount(SXData.wlmzList)}}</div>
                    </el-col>
                    <el-col :span="12">
                        <div>魔法增幅力(主)：{{sumCount(SXData.mfzfList)}}</div>
                        <div>魔法增幅力(它)：{{sumCount(SXData.mfzfList2)}}</div>
                        <div>魔法命中：{{sumCount(SXData.mfmzList)}}</div>
                        <div>魔法抵抗：{{sumCount(SXData.mfdkList)}}</div>
                        <div>盾牌防御：{{sumCount(SXData.dpfyList)}}</div>
                    </el-col>
                </el-row>

                <!-- <el-divider content-position="left">装备强化属性</el-divider> -->
                <!-- <div>
                    <div>生命力：：{{10*Number(FJStrong)*5}}</div>
                    <div>物理攻击力(白)：{{2*Number(WQStrong)}}</div>
                    <div>魔法增幅力(主)：{{20*Number(WQStrong)}}</div>
                </div> -->

                <el-divider content-position="left">装备套装属性</el-divider>
                <div>
                    <div>
                        <el-form :inline="true" size="mini">
                            <el-form-item label="请选择套装">
                                <el-select v-model="Suit">
                                    <el-option label="黑暗套装" value="黑暗套装"></el-option>
                                    <el-option label="精千套装" value="精千套装"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div>无</div>
                </div>

            </el-col>
        </el-row>

        <el-dialog :visible.sync="dialogZBList" top="50px" width="1280px" title="选择装备" append-to-body>
            <vZBData @rowData="rowData" :isComponents="true"></vZBData>
        </el-dialog>

        <!-- 物品详情 -->
        <el-dialog :visible.sync="dialogDetail" width="550px" title="物品详情信息" append-to-body>
            <vDataDetail  :id="id" :ZBType="ZBType"></vDataDetail>
        </el-dialog>

        <!-- 魔石设置 -->
        <el-dialog :visible.sync="dialogMSType" width="420px" title="魔石选择" append-to-body v-dialogDrag>
            <vMSSet :row="msRow" @MSData="MSData"></vMSSet>
        </el-dialog>
    </div>
</template>

<script>
import vZBData from "./data.vue"
import vDataDetail from './dataDetail.vue'
import vMSSet from './moshiSet.vue'
import {ZYType} from "@/components/game/aion/data.js"
import {jianX,hufaX,zhiyuX,shaX,jinglingX} from "@/components/game/aion/occAttr.js"
export default {
    components: {vZBData,vDataDetail,vMSSet},
    data() {
        return {
            id: '',
            dialogZBList: false,
            list: [],
            model: {},
            row: {},
            isBDWQ: false,
            WQStrong: '10',
            FJStrong: '10',
            Level: 50,
            ZYTypeStr: '剑星',
            ZYTypeList: ZYType,
            Suit: '',


            ZBType: '',
            SXData:{},
            changeList: [
                // { "_id": "fbf765c86288869f01ef2ec04206bd06", "icon": "icon_item_2hsword_u01.jpg", "name": "没落的古代神灵之双手剑", "number": "100900567", "pingzhi": "唯一", "type": "巨剑", "level": "50", "bhurt": "308~324", "bspeed": "2.4", "bhit": "854", "bwlzm": "10", "bwqfy": "816", "bmfmz": "260", "ehp": "+264", "ewlgj": "+30", "ZBType": 1, "bwType": "左手武器", "msNumber": [ "", "", "", "" ] },
                // { "_id": "fbf765c86288869f01ef2ec04206bd02", "icon": "icon_item_2hsword_u01.jpg", "name": "没落的古代神灵之双手剑", "number": "100900567", "pingzhi": "唯一", "type": "巨剑", "level": "50", "bhurt": "308~324", "bspeed": "2.4", "bhit": "854", "bwlzm": "10", "bwqfy": "816", "bmfmz": "260", "ehp": "+264", "ewlgj": "+30", "ZBType": 1, "bwType": "左手武器", "msNumber": [ "", "", "", "" ] },
                {bwType: '左手武器',msList: [],},
                {bwType: '右手武器',msList: [],},
                {
                    bwType: '上衣',
                },
                {
                    bwType: '下衣',
                },
                {
                    bwType: '护肩',
                },
                {
                    bwType: '手套',
                },
                {
                    bwType: '鞋子',
                },
                {
                    bwType: '腰带',
                },
                {
                    bwType: '项链',
                },
                {
                    bwType: '戒指',
                },
                {
                    bwType: '戒指',
                },
                {
                    bwType: '耳环',
                },
                {
                    bwType: '耳环',
                }
            ],
            changeIndex: 0,
            changebwType: '',
            dialogDetail: false,
            dialogMSType: false,
            pingzhi: '',
            msIndex: 0,
            msRow: {},

            occAttrModel: {},
        }
    },
    mounted() {
        this.occAttrData(this.ZYTypeStr)
    },
    methods: {
        clickDetail(row){
            this.id = row._id
            this.ZBType = row.ZBType
            this.dialogDetail = true
        },
        clickZB(row){
            this.dialogZBList = true
            this.changeIndex = row.index
            this.changebwType = row.bwType
        },
        rowData(row){
            this.row = row
            this.dialogZBList = false
            this.setTable(row,this.ZBType)
        },
        setTable(row){
            let rowS = JSON.parse(JSON.stringify(row))
            rowS.bwType = this.changebwType

            // 如果是双手武器的，合成武器属性值需要进行调整。
            this.isDBWQFuntion(rowS.type)
            if(this.isBDWQ){
                if(this.changeIndex==1){
                    let bhurt = rowS.bhurt?rowS.bhurt.split('~')[1]:0
                    rowS.bhp = ''
                    rowS.bhurt = Number(bhurt)*0.1 +'~'+Number(bhurt)*0.1
                    rowS.bwlzm = ''
                    rowS.bwlmz = ''
                    rowS.bmfzf = Number(rowS.bmfzf)*0.1
                    rowS.bmfmz = ''
                    rowS.bmfdk = ''
                }
            }

            this.$set(this.changeList,this.changeIndex,rowS)
            this.SXNumber()
            // this.isDBWQFuntion(rowS.type)

            // 要先 完成数据的更新,再更新 部位名称
            if(this.isBDWQ){
                this.$set(this.changeList[0],'bwType','双手武器')
                this.$set(this.changeList[1],'bwType','合成武器')
            }else{
                this.$set(this.changeList[0],'bwType','左手武器')
                this.$set(this.changeList[1],'bwType','右手武器')
            }
        },
        SXNumber(){
            this.SXData.hpList = []
            this.SXData.mpList = []
            this.SXData.wlgjList = [] //白攻击力
            this.SXData.wlgjlvList = [] //绿攻击力
            this.SXData.wlzmList = []
            this.SXData.wlmzList = []
            this.SXData.mfzfList = [] //武器主魔法增幅
            this.SXData.mfzfList2 = [] //装备额外魔法增幅
            this.SXData.mfmzList = []
            this.SXData.mfdkList = []
            this.SXData.dpfyList = []
            // console.log("属性计算")
            this.changeList.forEach(item=>{
                // 生命力
                this.SXData.hpList.push(Number(item.bhp?item.bhp:0) + Number(item.ehp?item.ehp:0)  + this.msNumber(item.msList,'ehp'))
                // this.SXData.mpList.push(Number(item.bmp?item.bmp:0) + Number(item.emp?item.emp:0))
                
                let wqHurt = item.bhurt?item.bhurt.split('~'):[0,0]
                // 白色攻击力（（最小+最大）/ 2 + 强化攻击力 ） * （职业力量/100） + 职业默认攻击力
                let hurt = ((wqHurt[0]+wqHurt[1]) / 2 ) * Number(this.occAttrModel.liliang) / 100 + Number(this.occAttrModel.wlgj)

                this.SXData.wlgjList.push(Number(hurt))
                console.log("hurt:"+hurt)

                // 绿色攻击力 白色攻击力 * 武器精通 + 武器绿色攻击力 + 职业默认绿色攻击力
                // this.JTNumber(item.type)
                let wlgjlvList = hurt * this.JTNumber(item.type)
                console.log("wlgjlvList:"+wlgjlvList)
                // this.SXData.wlgjlvList.push(Number(item.ewlgj?item.ewlgj:0)+this.msNumber(item.msList,'wlgj'))


                // 物理致命
                this.SXData.wlzmList.push(Number(item.bwlzm?item.bwlzm:0)+Number(item.ewlzm?item.ewlzm:0)+this.msNumber(item.msList,'wlzm'))
                // 物理命中
                this.SXData.wlmzList.push(Number(item.bhit?item.bhit:0)+Number(item.ewlmz?item.ewlmz:0))
                // 魔法增幅力（主）
                this.SXData.mfzfList.push(Number(item.bmfzfl?item.bmfzfl:0))
                // 魔法增幅力（它）
                this.SXData.mfzfList2.push(Number(item.emfzfl?item.emfzfl:0)+this.msNumber(item.msList,'mfzf'))
                // 魔法命中
                this.SXData.mfmzList.push(Number(item.bmfmz?item.bmfmz:0)+Number(item.emfmz?item.emfmz:0)+this.msNumber(item.msList,'mfmz'))
                // 魔法抵抗
                this.SXData.mfdkList.push(Number(item.bmfdk?item.bmfdk:0)+Number(item.emfdk?item.emfdk:0)+this.msNumber(item.msList,'mfdk'))
                // 盾牌防御
                let bgedang = item.bgedang?item.bgedang:0
                let egedang = item.egedang?item.egedang.split('+')[0]:0
                this.SXData.dpfyList.push(Number(bgedang)+Number(egedang)+this.msNumber(item.msList,'dpfy'))
            })
            // console.log(this.changeList)
        },
        // 基础属性
        occAttrData(val){
            if(val == '剑星'){
                this.occAttrModel = jianX
            }else if(val == '护法星'){
                this.occAttrModel = hufaX
            }else if(val == '治愈星'){
                this.occAttrModel = zhiyuX
            }else if(val == '杀星'){
                this.occAttrModel = shaX
            }else if(val == '精灵星'){
                this.occAttrModel = jinglingX
            }
        },
        // 魔石值计算
        msNumber(list,type){
            let res = 0
            if(list&&list.length>0){
                list.forEach(item=>{
                    res += item.type==type?item.value*Number(item.number):0
                })
            }
            // window.console.log(res)
            return res
        },
        changeMS(row){
            this.dialogMSType = true
            this.msRow = row
        },
        MSData(list){
            this.dialogMSType = false
            var listRes = JSON.parse(JSON.stringify(list))
            this.$set(this.changeList[this.msRow.index],'msList',listRes)
            this.SXNumber()
        },
        tableRowClassName ({row, rowIndex}) {
            row.index = rowIndex;
        },
        isDBWQFuntion(type){
            // console.log(type)
            if(type=='法杖'||type=='法典'||type=='宝玉'||type=='双手剑'||type=='巨剑'||type=='战戟'||type=='弓'){
                this.isBDWQ = true
            }else{
                this.isBDWQ = false
            }
        },
        // 基础属性合计
        sumCount(arr) {
            var s = 0;
            if(arr&&arr.length>0){
                arr.forEach(val=>{
                    s += val
                })
            }
            return s;
        },
        changeZYTypeStr(val){
            this.occAttrData(val)
        },
        // 按职业和选择的武器，返回武器精通值
        JTNumber(type,){
            // console.log(type)
            // console.log(this.occAttrModel)
            if(this.ZYTypeStr=='剑星'){
                if(type=='战戟'){
                    window.console.log(this.occAttrModel.jt_zhanqi)
                    return this.occAttrModel.jt_zhanji
                }
            }
        },
    },  
}
</script>

<style scoped lang="less">
.zxBox{
    .el-col{
        & .box {
            background:#f2f2f2;
            border: 1px solid #ddd;
            width:100%;
            height:80px;
            margin-bottom: 20px;
        }
    }
}
</style>